{template "guest_header"}

<div class="g-bd">  
  <div class="m-tit">
  上传头像
  </div>

 <div class="m-box">
  <div class="m-reg">

    {$menuHTML}
    <style type="text/css">
        .jcrop-holder {width:112px;height:112px; text-align: left;}
        .jcrop-vline, .jcrop-hline{font-size: 0;position: absolute;background: white url('./static/image/jcrop.gif') top left repeat;}
        .jcrop-vline { height: 100%; width: 1px !important;}
        .jcrop-hline { width: 100%; height: 1px !important;}
        .jcrop-handle {width: 7px !important;height: 7px !important;*width: 9px;*height: 9px;font-size: 1px;border: 1px #eee solid;background-color: #333;}        
        .jcrop-tracker { width:112px;height:112px;}
        .custom .jcrop-vline,.custom .jcrop-hline{background: yellow;}
        .custom .jcrop-handle{border-color: black;background-color: #C7BB00;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
        .Image {max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;
            zoom:expression( function(elm) {
				 if (elm.width>540) {
					 var oldVW = elm.width; elm.width=540;
					 elm.height = elm.height*(540 /oldVW);
				 }
				 elm.style.zoom = '1';
			 }(this));
		 }
    </style>
    <script type="text/javascript" src="static/js/jquery.Jcrop.js"></script>
    <script language="Javascript">
	function checkdata(){
	if($('#cropbox').attr('src').indexOf('noavatar.gif')>0){show_message('请上传您的形象照片',1,'提示','msgBox','msg_alert');}else{show_message('数据提交中，请稍候！');$('#crop_form').submit();}
	}
    	function upload_face()
    	{
    		// Remember to invoke within jQuery(window).load(...)
    		// If you don't, Jcrop may not initialize properly
    		jQuery(document).ready(function(){

    			jcrop_init();

    		});    		
    	}        
        function jcrop_init()
        {
            jQuery('#cropbox').Jcrop({
                    minSize: [ 40, 40 ],
                    maxSize: [ 600, 600 ],
                    aspectRatio: 1,
    				setSelect: [ 0, 0, 200, 200 ],
    				onChange: jcrop_showCoords,
    				onSelect: jcrop_showCoords
    			});
        }        
        // Our simple event handler, called from onChange and onSelect
		// event handlers, as per the Jcrop invocation above
		function jcrop_showCoords(c)
		{
			jQuery('#x').val(c.x);
			jQuery('#y').val(c.y);
			jQuery('#w').val(c.w);
			jQuery('#h').val(c.h);
		};
        <!--{if $temp_face}-->
            upload_face();
        <!--{/if}-->
        
    </script>
    
	<!--{if $uc_avatarflash}-->

	<img src="{$member[face_original]}" onerror="javascript:faceError(this);"/>
	<h2>设置我的新头像</h2>
	<p>请选择一个新照片进行上传编辑。<br>头像保存后，您可能需要刷新一下本页面(按F5键)，才能查看最新的头像效果</p>
	{$uc_avatarflash}
	
	<!--{else}-->
	
	<div class="m-help2">
		1、请先点下面“浏览”按钮选择头像图片，系统会自动上传并显示在下面正方形框内；<br>
		  &nbsp; &nbsp; &nbsp;（头像支持JPG、GIF和PNG格式，文件大小<i style="color:#ff0000">2M</i>以内）
	</div>

	<div>
		<iframe id="uploadface" name="uploadface" width="0" height="0" marginwidth="0" frameborder="0" src="about:blank"></iframe>
		<form method="post" action="ajax.php?mod=upload&code=face" enctype="multipart/form-data" name="face_form" target="uploadface" id="face_form">
            <input type="hidden" id="temp_face" name="temp_face" value="" />
		    <input id="idFile" name="face" type="file" onchange="if(false != idFileChange()) this.disabled='true';" style="margin:10px 0; padding:2px;"/>
		</form>
		<script type="text/javascript">
			function idFileChange() {				
				var idv = $('#idFile').val();
				if('' == idv || false == /\.(gif|jpg|jpeg|png)$/i.test(idv)) {
					show_message('请选择正确的图片类型');
					return false;
				} else {
					document.getElementById('face_form').submit();
					show_message('正在上传头像，请不要刷新页面');
					return true;
				}						
			}
		</script>
	</div>

    <span id="jcrop_init_id" onclick="jcrop_init();"></span>

    <div class="m-help2">2、用鼠标在头像上拖拉选择剪裁区域，最后点确认剪裁完成修改。<br>
		<img src="{$member[face_original]}" id="cropbox" onclick="upload_face();" border="0" alt="" class="Image" />
        </div>

		<form action="{$redirect_to}" method="post" id="crop_form">
		    <input type="hidden" id="uid" name="uid" value="{$uid}"/>
			<input type="hidden" id="x" name="x" />
			<input type="hidden" id="y" name="y" />
			<input type="hidden" id="w" name="w" />
			<input type="hidden" id="h" name="h" />
			<input name="old_face" value="{$member['face']}" type="hidden" />
			<input name="img_path" value="{$member['face']}" type="hidden" id="img_path" /><br />
		</form>
        
		<span class="u-cl-red" >* </span>修改头像后如果没有立即生效，请按Ctrl+F5强制刷新即可
        
	<!--{/if}-->
	</div>

	<div class="m-btn">
	<!--{if $uc_avatarflash}-->
	<input type="button" value="进入下一步" class="u-btn u-btn-lg" onclick="location.href='{$redirect_to}';"/>
	<!--{else}-->
	<input type="button" class="u-btn u-btn-lg" name="Submit"  value="确认剪裁并进入下一步"  onclick="checkdata();return false;" />
	<input type="button" class="u-btn u-btn-c4 u-btn-lg" value="跳过该步"  onclick="location.href='{$redirect_to}';" style="margin-left:20px;"/>
	<!--{/if}-->
	</div>
	

</div>
</div>
</div></div>
{template "topic_footer"}